<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="my-lucky"></div>
  <script src="../dev.js"></script>
  <script>
    let luckyNum = 1
    // 创建九宫格抽奖
    var luckyGrid = new LuckyCanvas.LuckyGrid({
      el: '#my-lucky',
      width: '300px',
      height: '300px'
    }, {
      blocks: [
        { padding: '15px', background: '#ffc27a', borderRadius: 28 },
        { padding: '4px', background: '#ff4a4c', borderRadius: 23 },
        { padding: '4px', background: '#ff625b', borderRadius: 20 },
      ],
      buttons: [{
        x: 1, y: 1,
        background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
        shadow: '0 5 1 #e89b4f',
        fonts: [
          { text: `${luckyNum} 次`, fontColor: '#fff', top: '73%', fontSize: '11px' },
        ],
        imgs: [
          { src: './img/button.png', width: '65%', top: '12%' },
          { src: './img/btn.png', width: '50%', top: '73%' }
        ]
      }],
      activeStyle: {
        background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
        shadow: ''
      },
      defaultConfig: {
        gutter: 5,
      },
      defaultStyle: {
        borderRadius: 15,
        fontColor: '#DF424B',
        fontSize: '14px',
        textAlign: 'center',
        background: '#fff',
        shadow: '0 5 1 #ebf1f4'
      },
      start () {
        if (!luckyNum) return alert('还剩0次抽奖机会')
          luckyGrid.stop(4)
        luckyGrid.play()
        // setTimeout(() => {
        //   luckyGrid.stop(4)
        // }, 3000)
      },
      end (prize) {
        console.log(prize)
        // alert(`恭喜你获得大奖: ${prize.name}`)
        // luckyNum--
        luckyGrid.buttons[0].fonts[0].text = `${luckyNum} 次`
        // luckyGrid.stop(-1)
      }
    })
    // 模拟接口异步请求奖品列表
    setTimeout(() => {
      const prizes = []
      const data = [
        { name: '1元红包', img: './img/3.png' },
        { name: '100元红包', img: './img/1.png' },
        { name: '0.5元红包', img: './img/3.png' },
        { name: '2元红包', img: './img/2.png' },
        { name: '10元红包', img: './img/4.png' },
        { name: '50元红包', img: './img/5.png' },
        { name: '0.3元红包', img: './img/6.png' },
        { name: '5元红包', img: './img/7.png' }
      ]
      let axis = [[0, 0], [1, 0], [2, 0], [2, 1], [2, 2], [1, 2], [0, 2], [0, 1]]
      for (let i = 0; i < 8; i++) {
        let item = data[i]
        prizes.push({
          name: item.name,
          index: i, x: axis[i][0], y: axis[i][1],
          fonts: [{ text: item.name, top: '70%' }],
          imgs: [{ src: item.img, width: '53%', top: '8%' }]
        })
      }
      luckyGrid.prizes = prizes
    })
    setTimeout(_ => {
      luckyGrid.prizes[0].fonts[0].text = 'xxx'
      luckyGrid.defaultStyle.fontColor = 'green'
      // luckyGrid.rows = 4
    }, 500)

// ;(function test () {
//   setTimeout(() => {
//     console.log(111)
//     test()
//   }, 1000)
// })();
// ;(function test () {
//   window.requestAnimationFrame(() => {
//     console.log(222)
//     test()
//   })
// })();
  </script>
</body>
</html>
